<template>
  <div class="header_margin-top">
    <Header/>
    <div class="clearfix con-width-1200">
      <div class="public-title clearfix pos-rel">
        <h2 class="pos-rel course">Contact us</h2>
        <h1 class="pos-abs">联系我们</h1>
        <h3 class="pos-abs">转角就能遇到京瑜伽，何必跋山涉水，把时间浪费在路上</h3>
        <div class="catage clearfix pos-abs">
          您所有在位置：首页  >  联系我们  >   列表
        </div>
      </div>

      <ul class="contact-list clearfix">
        <li class="clearfix pos-rel" v-for="site in addressList" :key="site.id">
          <div class="pos-abs bus-list">
            <i class="iconfont icon-icon fxl"></i>
            <span class="fxl">乘车线路</span>
            <div class="clear"></div>
            <p>{{site.remarks}}</p>
          </div>
          <img :src="site.imgUrl" class="img">
          <div class="pos-abs clearfix detail">
            <i class="iconfont pos-abs icon-dingwei"></i>
            <p class="address">{{site.address}}</p>
            <p class="address-detal">{{site.addressDetail}}</p>
            <p class="num">{{site.phone}}</p>
          </div>
        </li>
      </ul>
      <div class="clear hei20"></div>
    </div>
    <Footer/>
  </div>
</template>

<script>
  import Header from './Header.vue'
  import Footer from './Footer.vue'
  import _http from "../httpService";

  export default {
    name: "Contactus",
    props: {
      msg: String
    },
    data() {
      return {
        addressList: []
      };
    },
    components: {
      Header,
      Footer
    },
    mounted() {
      _http
      .get("/content/selectListByEnterpriseIdAndCatalogCode?catalogCode=address")
      .then(response => {
        this.addressList = [];
        response.data.forEach(element => {
          this.addressList.push({
            id: element.id,
            address: element.title,
            addressDetail: element.summary,
            imgUrl: element.previewImage,
            phone: element.phone,
            remarks: element.remarks
          });
        });
      })
      .catch(error => console.log(error))
      .finally(() => (this.loading = false));
    }
  };
</script>

<style>
  @import "../assets/iconfont/iconfont.css";
  body{background:#f4f4f4 !important}
  .header_margin-top {
    margin:0px !important;
    padding-top: 120px !important;
  }
  .contact-list li{float:left;width:530px;height:600px;padding:0px;border:0px solid #ddd;text-align:left;cursor:pointer;margin-bottom:60px;background:#f6ebe1;}
  .contact-list li:nth-of-type(even){
    float:right;
  }
  .contact-list li img{width:100%;height:400px;}
  .contact-list li .bus-list{top:410px;left:0px;right:0px;font:normal 12px/30px "Microsoft YaHei";color:#5D5652;padding:20px;}
  .contact-list li .bus-list>i{font:normal 30px/30px "Airal";color:#e95836;margin-right:5px;}
  .contact-list li .bus-list>span{font:bold 14px/30px "Airal";}
  .contact-list .detail{top:90px;left:-20px;z-index:8;width:80%;height:200px;background:#e95836;padding:40px 0px 0px 100px;color:#fff;font:normal 14px/30px "Microsoft YaHei";}
  .contact-list .detail p{width:90%;max-height:90px;overflow:hidden;}
  .contact-list .detail i.iconfont{left:40px;font:normal 50px/120px "Arial";}
  .public-title h2.course:before{
    width:180px;
  }

</style>
